<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .vc-ellipsis {
            display: flex;
            --height: 160px;
            height: var(--height);
            overflow: hidden;
        }

        .vc-ellipsis .text {}

        .vc-ellipsis .text::before {
            content: '';
            float: right;
            width: 0;
            height: calc(100% - 25px);
            background: red;
        }

        .vc-ellipsis .label {
            float: right;
            clear: both;
            cursor: pointer;
            font-size: 14px;
            padding: 2px 10px;
            border: 1px solid;
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <div class="vc-ellipsis">
            <div class="text">
                <label class="label">展开</label>
                <div>
                    <p>品牌排行是根据多种因素综合形成的，包括品牌的均价、销量、市占率、影响力、口碑和知名度等等，因此很难有绝对权威的排名，也就会出现每个平台的排名都无法统一的情况。
                    </p>
                    <p>
                        平常我们所说的权威大多都是以平台本身的专业度和用户量的多少去判断的，而平台本身对品牌做出的排名也是依靠于后台的大数据分析以及相关机构的调研所得，存在一定的局限性。如果你想从品牌排名当中选出几个比较可靠的品牌，那当然最好是能综合多几个网站，罗列出它们都有提到的品牌为好。
                    </p>
                    <p>
                        另外，不少商家会通过操纵所谓的“品牌排行榜”来达到广告的目的，目前这方面的监管也比较松，容易引出很多乱象。因此个人建议品牌排行只能作为一个参考，而不要作为一个决定性的指标。</p>
                    <p>我个人平常用的比较多，觉得比较靠谱的品牌排行网站有三个：</p>
                    <p>1、中国品牌网：
                        <a href="https://www.chinapp.com/paihang">https://www.chinapp.com/paihang</a>
                    </p>
                    <p>2、中商情报网：<a href="https://top.askci.com/">https://top.askci.com/</a></p>
                    <p>3、一点排行网：<a href="https://www.zswxy.cn/">https://www.zswxy.cn/</a></p>
                    <p>以上三者都是较为权威和中立的，其中以中国品牌网为首。</p>
                    <p>另外在一些电商平台上也有着一些品牌排行榜，例如京东，它们上面的排行榜也可以作为一些参考。</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const box = document.querySelector('.vc-ellipsis')
        const label = document.querySelector('.vc-ellipsis .label')
        if (Math.ceil(box.scrollHeight) > Math.ceil(box.offsetHeight)) {
            label.style.display = 'block'
        }
        let isOpen = false
        label.addEventListener('click', (e) => {
            e.stopPropagation()
            if (isOpen) {
                box.style.setProperty('--height', '160px')
            } else {
                box.style.setProperty('--height', 'auto')
            }
            label.innerHTML = isOpen ? '展开' : '收起'
            isOpen = !isOpen
        })
        // const shadowBox = box.cloneNode()
        // shadowBox.style.
    </script>


</body>

</html>